<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整蛊页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            overflow: hidden;
            transition: all 0.5s ease;
        }

        .container {
            text-align: center;
            padding: 40px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            transition: all 0.3s ease;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        button {
            padding: 12px 24px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }

        .hidden {
            display: none;
        }

        .shake {
            animation: shake 0.5s linear infinite;
        }

        @keyframes shake {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-5px, 0); }
            20% { transform: translate(5px, 0); }
            30% { transform: translate(-5px, 0); }
            40% { transform: translate(5px, 0); }
            50% { transform: translate(-5px, 0); }
            60% { transform: translate(5px, 0); }
            70% { transform: translate(-5px, 0); }
            80% { transform: translate(5px, 0); }
            90% { transform: translate(-5px, 0); }
            100% { transform: translate(0, 0); }
        }

        .rotate {
            animation: rotate 2s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .upside-down {
            transform: rotate(180deg);
        }

        .flash {
            animation: flash 0.5s ease-in-out infinite;
        }

        @keyframes flash {
            0% { background-color: white; }
            50% { background-color: #ff5252; }
            100% { background-color: white; }
        }

        .message {
            font-size: 24px;
            margin: 20px 0;
            color: #ff5252;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: red;
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            display: none;
        }

        .fake-picture {
            width: 300px;
            height: 200px;
            background-color: #ddd;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            border: 1px solid #ccc;
        }

        .progress-container {
            width: 100%;
            background-color: #ddd;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
            display: none;
        }

        .progress-bar {
            height: 20px;
            background-color: #4CAF50;
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="container" id="main-container">
        <h1>恭喜你！</h1>
        <p>你已经被选中获得一份神秘礼物！点击下方按钮领取！</p>
        <div class="fake-picture">神秘礼物图片</div>
        <button id="gift-btn">领取我的礼物</button>
        <p class="hidden message" id="message"></p>
        <div class="progress-container" id="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <button class="close-btn" id="close-btn">X</button>
    </div>

    <script>
        const giftBtn = document.getElementById('gift-btn');
        const message = document.getElementById('message');
        const container = document.getElementById('main-container');
        const closeBtn = document.getElementById('close-btn');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        let clickCount = 0;
        let phase = 0;

        giftBtn.addEventListener('click', function() {
            clickCount++;
            
            switch(phase) {
                case 0:
                    // 第一次点击，显示加载进度
                    message.textContent = "正在准备您的礼物，请稍候...";
                    message.classList.remove('hidden');
                    progressContainer.style.display = 'block';
                    
                    let width = 0;
                    const interval = setInterval(function() {
                        if (width >= 100) {
                            clearInterval(interval);
                            progressContainer.style.display = 'none';
                            message.textContent = "礼物已准备就绪！再次点击领取!";
                            phase = 1;
                        } else {
                            width += 1;
                            progressBar.style.width = width + '%';
                        }
                    }, 30);
                    break;
                    
                case 1:
                    // 第二次点击，开始整蛊
                    container.classList.add('shake');
                    message.textContent = "哎呀！出了点小问题...";
                    
                    setTimeout(() => {
                        container.classList.remove('shake');
                        container.classList.add('rotate');
                        message.textContent = "系统正在旋转中...";
                        
                        setTimeout(() => {
                            container.classList.remove('rotate');
                            container.classList.add('upside-down');
                            message.textContent = "现在看起来更奇怪了！";
                            
                            setTimeout(() => {
                                document.body.classList.add('flash');
                                message.textContent = "警告！系统故障！";
                                
                                setTimeout(() => {
                                    document.body.classList.remove('flash');
                                    container.classList.remove('upside-down');
                                    message.textContent = "恭喜！你被骗了！";
                                    closeBtn.style.display = 'block';
                                    
                                    // 创建假的弹窗
                                    setTimeout(createFakeAlert, 1000);
                                }, 3000);
                            }, 3000);
                        }, 3000);
                    }, 2000);
                    break;
            }
        });
        
        closeBtn.addEventListener('click', function() {
            container.style.display = 'none';
            document.body.innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 24px; font-family: Arial, sans-serif;">愚人节快乐！</div>';
        });
        
        function createFakeAlert() {
            const fakeAlert = document.createElement('div');
            fakeAlert.style.position = 'fixed';
            fakeAlert.style.top = '50%';
            fakeAlert.style.left = '50%';
            fakeAlert.style.transform = 'translate(-50%, -50%)';
            fakeAlert.style.padding = '20px';
            fakeAlert.style.backgroundColor = 'white';
            fakeAlert.style.border = '1px solid #ccc';
            fakeAlert.style.borderRadius = '5px';
            fakeAlert.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
            fakeAlert.style.zIndex = '1000';
            fakeAlert.style.textAlign = 'center';
            
            fakeAlert.innerHTML = `
                <p>警告！</p>
                <p>您的电脑已被病毒感染！</p>
                <p>请立即联系技术支持：123-456-7890</p>
                <button onclick="this.parentNode.remove()">确定</button>
            `;
            
            document.body.appendChild(fakeAlert);
            
            // 每隔几秒创建一个新的假警报
            setTimeout(() => {
                if (Math.random() > 0.5) {
                    createFakeAlert();
                }
            }, 3000);
        }
        
        // 添加一些随机的鼠标跟踪效果
        document.addEventListener('mousemove', function(e) {
            if (phase >= 1 && Math.random() > 0.95) {
                const bubble = document.createElement('div');
                bubble.style.position = 'absolute';
                bubble.style.width = '20px';
                bubble.style.height = '20px';
                bubble.style.borderRadius = '50%';
                bubble.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                bubble.style.left = e.clientX + 'px';
                bubble.style.top = e.clientY + 'px';
                bubble.style.pointerEvents = 'none';
                bubble.style.zIndex = '1000';
                bubble.style.opacity = '0.7';
                
                document.body.appendChild(bubble);
                
                // 气泡动画
                let size = 20;
                let opacity = 0.7;
                const growInterval = setInterval(() => {
                    size += 2;
                    opacity -= 0.05;
                    bubble.style.width = size + 'px';
                    bubble.style.height = size + 'px';
                    bubble.style.opacity = opacity;
